<template>
  <div class="nav">
      <ul>
        <li><router-link  exact to="/">首页</router-link></li>
        <li><router-link to="/topic">电台</router-link></li>
        <li><router-link to="/mine">我的</router-link></li>
        <li><router-link to="/search">搜索</router-link></li>
      </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.nav{
  background-color: #fff;
  margin: 10px 20px;
  padding: 0 10px;
    ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
      li{
        a{
          display: block;
          border-bottom: 5px solid transparent;
          padding: 30px;
          color: black;
          font-size: 20px;
          &:hover,&.active{
            color: orange;
            border-bottom: 5px solid orange;
          }
        }
      }
    }
}
</style>
